<template>
  <div class="container">
    <el-card shadow="always">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-date-picker
            v-model="query.time"
            type="daterange"
            range-separator="至"
            start-placeholder="培训开始日期"
            end-placeholder="培训结束日期"
         :clearable="false"
            @change="onDateTime"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-col>

        <el-col :span="4">
          <el-select
            v-model="query.disinEffectName"
            placeholder="请选择消毒效果"
            clearable
          >
            <el-option
              v-for="item in ['合格', '不合格']"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select
            v-model="query.disinModeName"
            placeholder="请选择消毒方式"
            clearable
          >
            <el-option
              v-for="item in [
                '煮沸消毒',
                '蒸汽消毒',
                '热力消毒',
                '浸泡消毒',
                '烤箱消毒',
                '消毒柜消毒',
                '紫外线消毒',
                '臭氧消毒',
              ]"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-col>

        <el-col :span="4">
          <el-input
                maxlength="50"
            v-model="query.tablewareName"
            clearable
            placeholder="请输入餐具名称"
          ></el-input>
        </el-col>
    
             <el-col :span="3">
  <el-select v-model="query.taskStatus" placeholder="请选择处置状态" clearable>
            <el-option
              v-for='(item,index) in [ { text: "消毒状态", value: "" },
      { text: "未消毒", value: "0" },
      { text: "已消毒", value: "1" },
      { text: "不需消毒", value: "2" }]'              :key="index"
              :label="item.text"
              :value="item.value"
            >
            </el-option>
          </el-select>
          
        </el-col>
            <el-col :span="2">
          <el-button type="primary" @click="query.page=1;getList()">查询</el-button>
        </el-col>
      </el-row>
      <rz-height></rz-height>


       
      <el-row>
  <el-col :span="4">
          <calendar classify="5" @view="view" name="餐具消毒日历"></calendar>
        </el-col>
  </el-row>
      <rz-height></rz-height>



      <el-table :data="tableData" border style="width: 100%" :row-class-name="tableRowClassName">








  <el-table-column prop="taskDate" label="任务日期">
        <template slot-scope="scope">
     {{ scope.row.taskDate}}({{ scope.row.taskWeek}})
          </template>
        </el-table-column>
        <el-table-column prop="tablewareName" label="餐具名称"></el-table-column>
        <el-table-column prop="disinModeName" label="消毒方式"></el-table-column>
        <el-table-column prop="tablewareCnt" label="处置数量(份)"></el-table-column>
        <el-table-column prop="disinMinutes" label="消毒时长(分钟)"></el-table-column>
        <el-table-column prop="disinEffectName" label="消毒效果"></el-table-column>
          <el-table-column  label="消毒状态"> 
            <template slot-scope="scope">
  <div v-if="scope.row.taskStatus==0">暂未消毒</div>
                <div v-else-if="scope.row.taskStatus==1">已消毒</div>
                <div v-else>未消毒原因:{{scope.row.completeExplain}}</div>


          </template>

        </el-table-column>
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" v-if="scope.row.taskStatus==1" @click="view(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        @pagination="getList"
        :page.sync="query.page"
      />
    </el-card>

    <rz-dialog
      :dialogVisible.sync="dialogVisible"
      :isShowConfirm="false"
      title="查看消毒记录"
    >
      <el-form label-width="80px">



  <el-row>
          <el-col :span="12">
     <el-form-item label="消毒时间"> {{ data.disinfectionTime }} </el-form-item>
          </el-col>
          <el-col :span="12">

       
 <el-form-item label="完成时间">
            {{ data.completionDate }}
          </el-form-item>
          </el-col>
        </el-row>



 <el-row>
          <el-col :span="12">
       <el-form-item label="餐具名称">{{ data.tablewareName }}</el-form-item>

          </el-col>
          <el-col :span="12">
   <el-form-item label="消毒方式"> {{ data.disinModeName }} </el-form-item>

          </el-col>
        </el-row>



        
 <el-row>
          <el-col :span="12">
      <el-form-item label="处置数量"> {{ data.tablewareCnt }}({{data.tablewareCntCompany}})</el-form-item>

          </el-col>
          <el-col :span="12">
   <el-form-item label="消毒时长"> {{ data.disinMinutes }}(分钟) </el-form-item>

          </el-col>
        </el-row>
                
 <el-row>
          <el-col :span="12">
        <el-form-item label="消毒效果"> {{data.disinEffectName}}</el-form-item>


          </el-col>
          <el-col :span="12">
     
        <el-form-item label="备注"> {{ data.remark ||'--'}} </el-form-item>
          </el-col>
        </el-row>
       
        
        
    
      </el-form>
    </rz-dialog>
  </div>
</template>
<script>
import  calendar from "@/views/enterprise/components/calendar";
import { QueryunitTablewareDisinList } from "@/api/modules/enterprise";
export default {
  // props:[],
  // 页面加载
  created() {
      this.query.startdate=this.$moment().subtract(1, 'month').format('YYYY-MM-DD')
    this.query.enddate=this.$moment().format('YYYY-MM-DD')
    this.query.time=[this.$moment().subtract(1, 'month').format('YYYY-MM-DD'),this.$moment().format('YYYY-MM-DD')]
    this.getList();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      //   options: ["合格", "不需要考核"],
      query: {
        enddate: "",
        isPage: 0,
        page: 1,
        pageSize: 10,
        startdate: "",
        unitId: sessionStorage.getItem("interpretation"),
        time: "",
        taskStatus: "",
        disinEffectName: "",
        disinModeName: "",
        tablewareName: "",
      },
      tableData: [],
      total: 0,
      dialogVisible: false,
      data: {},
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
    };
  },
  // 方法
  methods: {
    getList() {
      QueryunitTablewareDisinList(this.query).then((res) => {
             res.data.forEach(x=> {
           for (const key in x) {
              if(!x[key]){
                x[key]='--'
              }
           }
         })
        this.total = res.totalCount;
        this.tableData = res.data;
      });
    },
    view(e) {
      this.data = e;
      this.dialogVisible = true;
    },
    onDateTime(e) {
      if (e) {
        this.query.startdate = e[0];
        this.query.enddate = e[1];
      } else {
        this.query.startdate = "";
        this.query.enddate = "";
      }
    },
        tableRowClassName(e){
      console.log(e.row.taskWeek=='星期日');
      if(e.row.taskWeek=='星期日'||e.row.taskWeek=='星期六'){
         return 'warning-row';
      }else{
          return '';
      }
    }
  },
  // 监听属性
  watch: {},
  // 组件
  components: {  calendar},
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
.container {
  /deep/ .el-date-editor {
    width: 100% !important;
  }
  /deep/ .el-image {
    margin-right: 10px;
  }
   /deep/ .el-table .warning-row {
    background: oldlace;
  }
}
</style>